<template>
  <view class="content">
    <nav-back />
    <view class="topBox">
      <h3>WELCOME</h3>
      <h3>欢迎使用</h3>
    </view>
    <view class="inputBox">
      <view class="ipt">
        <h4>手机号</h4>
        <input type="tel" v-model="payload.mobile" placeholder="请输入手机号" />
      </view>
      <view class="ipt">
        <h4>密码</h4>
        <input type="password" v-model="payload.password" minlength="4" maxlength="16" placeholder="请输入密码" />
      </view>
      <tn-button :disabled="loading" :blockTime="1000" @click="doLogin" class="btn-login" background-color="#1D2541" font-color="#ffffff" size="lg">登录</tn-button>
<!--      <tn-button class="btn-register" background-color="#eeeeee" font-color="#1D2541" size="lg">注册</tn-button>-->

    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import NavBack from "@/components/nav-back.vue";
import TnButton from "@/tuniao-ui/components/tn-button/tn-button.vue";
import { login } from "@/api/auth/auth";
import { findInfo } from "@/api/system/self";

export default {
  components: {TnButton, NavBack},
  data() {
    return {
      payload: {
        mobile: '',
        password: ''
      },
      loading: false
    }
  },
  computed: {
    ...mapState(['vuex_user']),
  },
  methods: {
    async doLogin() {
      try {
        if (this.loading) {
          return
        }
        if (uni.$t.test.empty(this.payload.mobile)) {
          uni.$t.utils.toast('请输入手机号')
          return
        }
        if (!uni.$t.test.mobile(this.payload.mobile)) {
          uni.$t.utils.toast('手机号格式不正确')
          return
        }
        if (uni.$t.test.empty(this.payload.password)) {
          uni.$t.utils.toast('请输入密码')
          return
        }
        this.loading = true
        uni.showLoading({title: '正在登录'})
        const { data: token } = await login(this.payload)
        uni.$t.auth.setToken(token)
        const { data: self } = await findInfo()
        this.$t.vuex('vuex_user', self)
        uni.switchTab({url: '/pages/home/home'})
        uni.hideLoading()
        this.loading = false
      } catch (e) {
        uni.hideLoading()
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #1D2541;
  background-size: cover;
}

.topBox {
  font-size: 34rpx;
  color: #fff;
  padding: 90rpx 50rpx;
}

h3 {
  margin-bottom: 10rpx;
}

.inputBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 85vh;
  background-color: #fff;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding: 60rpx;
  box-sizing: border-box;

}

.ipt {
  margin-bottom: 50rpx;

  h4 {
    margin-bottom: 26rpx;
    font-size: 36rpx;
    color: #1D2541;
  }

  input {
    border-bottom: 1px solid #dedede;
    font-size: 26rpx;
  }
}

.btn {

  &-login, &-register {
    width: 100% !important;
    border-radius: 40rpx;
    margin-top: 50rpx;
  }
}


.tipbox {
  position: fixed;
  bottom: 120rpx;
  left: 50%;
  transform: translate(-50%, -120px);
}

.otherUser {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
}

.txt {
  font-size: 28rpx;
  color: #969696;
}

.otherUser .uni-icons {
  margin-left: 20rpx;
}
</style>